<template>
  <tbody width="100%" class="cartTable" cellspacing="0" cellpadding="10px">
    <tr class="row" v-for="item in list" :key="item.id">
      <td>
        <input
          v-model="item.isSelected"
          type="checkbox"
          name=""
          class="choose"
        />
      </td>
      <td class="tal">
        <a href="#" class="pic"><img :src="item.img" alt="" /></a>
      </td>
      <td class="tal">
        <a href="#">{{ item.name }}</a>
      </td>
      <td>
        <del class="tdl">{{ item.oldPrice }}</del>
        <br />
        <b class="unit">{{ item.price }}</b>
      </td>
      <td>
        <div class="amount">
          <a href="#" class="Increase" @click="addNumber(item.id)">+</a>
          <input type="text" :value="item.count" class="unum" />
          <a href="#" class="Reduce" @click="subNumber(item.id)">-</a>
        </div>
      </td>
      <td>
        <b class="u-price">{{ (item.price * item.count).toFixed(2) }}</b>
      </td>
      <td><a href="#" class="btn-del" @click="del(item.id)">删除</a></td>
    </tr>
  </tbody>
</template>
<script>
export default {
  name: 'TodoMain',
  props: {
    list: {
      type: Array,
      required: true,
    },
  },
  methods: {
    del(id) {
      this.$emit('del', id)
    },
    addNumber(id) {
      this.$emit('addNumber', id)
    },
    subNumber(id) {
      this.$emit('subNumber', id)
    },
  },
}
</script>
<style lang="less" scoped></style>
